// React基础组件
import React from 'react'
// dva 连接组件 - 连接route和model
import { connect } from 'dva'
// 引入antd的组件
import { Form, Modal, Select, Tooltip, DatePicker, Icon, Button, Table } from 'antd'
const { MonthPicker, RangePicker, WeekPicker } = DatePicker;
//导入路由组件，用于跳转等
import { Link, hashHistory } from 'dva/router'
// 导入项目全局配置文件
import config from 'config/config'
import { get } from 'lodash'
// 引入model取值工具方法
import { mapStateToProps } from 'utils/view_utils'
// 当前组件样式
import styles from './activityAreaStatisticsStyle.less'
import cx from 'classnames';
import Chart from 'widget/Chart/chart';
import BigChart from 'widget/Chart/chartwithsize';
import echarts from "echarts";
// 日期格式化
import { DateUtil } from '../../../../utils/dateUtil'
import { func } from 'prop-types'
const formatDate = DateUtil.formatDate

/**
 * description 路由视图及事件处理
 * dispatch 分发到models中的effects对应事件名
 * model 用于获取models中state定义的数据
 * form 表单对象
 */
const liveStatisticsView = function ({ dispatch, model, form }) {

    // 取出model对象，命名空间
    const { modelObj, namespace } = model

    let { ComeInCount, CountTrends, customTime, activityAreaId, startTime, endTime, listData, detail, linexAxis, lineDataList, barDataList, barDuration, geoCoordMap, cityValueMap, provinceData, markers, province, center } = modelObj

    // let script = document.createElement("script");
    // script.src = "https://api.map.baidu.com/api?v=2.0&ak=rGeQywxR5cAzRXXNTyZeeAY1o5Qsndp1&callback=initialize";
    // document.body.appendChild(script);

    const lineoption = {
        title: {
            text: '',
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                label: {
                    backgroundColor: '#6a7985'
                }
            }
        },
        grid: {
            show: true,
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,// 坐标轴两边留白策略
            data: linexAxis,
            splitLine: {
                show: false
            }
        },
        yAxis: {
            type: 'value',
            boundaryGap: [0, '100%'],
            axisLine: {
                onZero: false
            },
            axisLabel: {
                formatter: '{value}'
            },
            splitLine: {
                show: false
            }
        },
        dataZoom: [{
            type: 'slider',
            xAxisIndex: 0,
            start: 0,
            end: 100
        }],
        series: lineDataList
        // series: [
        //     {
        //         name: '观众分布数据',
        //         type: 'line',
        //         smooth: true,
        //         symbol: 'none',
        //         sampling: 'average',
        //         itemStyle: {
        //             color: '#5599ff'
        //         },
        //         areaStyle: {
        //             color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
        //                 offset: 0,
        //                 color: '#5599ff'
        //             }, {
        //                 offset: 1,
        //                 color: '#5599ff'
        //             }])
        //         },
        //         data: lineDataList
        //     }
        // ]
    };

    const baroption = {
        title: {
            text: '',
        },
        color: ['#5599ff'],
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        grid: {
            show: true
        },
        xAxis: [
            {
                type: 'category',
                data: ['识别小程序码/二维码', '微信窗口', '应用内主动点击', '其他'],
                axisTick: {
                    alignWithLabel: true
                },
                splitLine: {
                    show: false
                },
            }
        ],
        yAxis: [
            {
                type: 'value',
                splitLine: {
                    show: false
                },
                axisLine: {
                    onZero: false
                },
                axisLabel: {
                    formatter: '{value}'
                },
            }
        ],
        series: [
            {
                // name: "人",
                type: 'bar',
                symbolSize: [20, 30],
                symbolOffset: [0, -40],
                color: '#5599ff',
                symbolPosition: 'end',
                splitLine: {
                    show: false
                },
                label: {
                    show: true,
                    position: "top",
                    formatter: function (params) {
                        return barDataList[params.dataIndex]
                    },
                    fontSize: 20,
                    color: '#5599ff'
                },
                data: barDataList
            }
        ]
    };

    const dateArray = [
        { label: '最近7天', value: 7 },
        { label: '最近14天', value: 14 },
        { label: '最近30天', value: 30 },
        { label: '自定义', value: 'custom' }
    ]
    const showType1 = [
        { label: '打开次数', value: 1 },
        { label: '访问人数', value:2 },
    ]
    const showType2 = [
        { label: '打开次数', value: 1 },
        { label: '访问人数', value: 2 },
    ]

    // 表格表头
    const columns = [
        { title: '栏目标题', dataIndex: 'columnTitle', key: 'columnTitle' },
        { title: '栏目类别', dataIndex: 'columnType', key: 'columnType' },
        { title: '栏目内容', dataIndex: 'content', key: 'content' },
        { title: '点击量', dataIndex: 'count', key: 'count' }
    ];
    // 导出表格
    function activityAreaexport(params) {
        dispatch({
            type: `${namespace}/activityAreaexport`
        })
    }
    // 活动趋势查询
    function inputChange(val, type, opt) {
        console.log('ty', typeof val)
        if (type == 'time') {
            // 自定义就不往下走
            dispatch({
                type: `${namespace}/updateStore`,
                payload: {
                    customTime: val
                }
            });
            if (val == 'custom') {
                return false
            };
            let nowDate = new Date().getTime()
            let startTime = formatDate(nowDate - 3600 * 24 * 1000 * val)
            let endTime = formatDate(nowDate)
            dispatch({
                type: `${namespace}/updateStore`,
                payload: {
                    startTime,
                    endTime,
                    // lineDateList: arr
                }
            });
            dispatch({
                type: `${namespace}/getActivityAreaCount`, payload: {
                    activityAreaId: activityAreaId,
                    startTime,
                    endTime
                }
            });
            dispatch({
                type: `${namespace}/getActivityAreaComeInCount`, payload: {
                    activityAreaId: activityAreaId,
                    startTime,
                    endTime,
                    type: ComeInCount
                }
            });
            dispatch({
                type: `${namespace}/getActivityAreaColumnCount`, payload: {
                    activityAreaId: activityAreaId,
                    startTime,
                    endTime
                }
            });
            dispatch({
                type: `${namespace}/getActivityAreaCountTrends`,
                payload: {
                    activityAreaId: activityAreaId,
                    startTime,
                    endTime,
                    type: CountTrends
                }
            });
        } else if (type == 'lookPerson') {   
            let CountTrends = val
            dispatch({
                type: `${namespace}/updateStore`,
                payload: {
                    CountTrends
                    // lineDateList: arr
                }
            });
            dispatch({
                type: `${namespace}/getActivityAreaCountTrends`,
                payload: {
                    activityAreaId: activityAreaId,
                    startTime,
                    endTime,
                    type: CountTrends
                }
            });
        } else if (type == 'comeIn') {
            let ComeInCount = val
            dispatch({
                type: `${namespace}/updateStore`,
                payload: {
                    ComeInCount
                    // lineDateList: arr
                }
            });
            dispatch({
                type: `${namespace}/getActivityAreaComeInCount`, payload: {
                    activityAreaId: activityAreaId,
                    startTime,
                    endTime,
                    type: ComeInCount
                }
            });
        }

    }
    function onchangRange(val, times) {
        console.log('时间段', val, times)
        let startTime = times[0];
        let endTime = times[1];
        dispatch({
            type: `${namespace}/updateStore`,
            payload: {
                startTime,
                endTime,
                // lineDateList: arr
            }
        });
        dispatch({
            type: `${namespace}/getActivityAreaCount`, payload: {
                activityAreaId: activityAreaId,
                startTime,
                endTime
            }
        });
        dispatch({
            type: `${namespace}/getActivityAreaComeInCount`, payload: {
                activityAreaId: activityAreaId,
                startTime,
                endTime,
                type: ComeInCount
            }
        });
        dispatch({
            type: `${namespace}/getActivityAreaColumnCount`, payload: {
                activityAreaId: activityAreaId,
                startTime,
                endTime
            }
        });
        dispatch({
            type: `${namespace}/getActivityAreaCountTrends`,
            payload: {
                activityAreaId: activityAreaId,
                startTime,
                endTime,
                type: CountTrends
            }
        });
    }

    return (
        <div className={cx('pageLayout')} className={styles.detail}>
            <div className={styles.inlines}>
                <div className={styles.times}>
                    <Select placeholder='请选择时间' defaultValue={7} onChange={(e, opt) => {
                        inputChange(e, 'time', opt)
                    }}>
                        {dateArray.map(function (item, index) {
                            return (
                                <Select.Option key={item.value} value={item.value}>{item.label}</Select.Option>
                            )
                        })}
                    </Select>
                </div>
                <span className={styles.timeCont}>
                    {customTime != 'custom' && <span><span className="startTime">{startTime}</span><span>至</span><span className="endTime">{endTime}</span></span>}
                    {customTime == 'custom' && <RangePicker allowClear={false} onChange={(e, opt) => onchangRange(e, opt)} />}
                </span>
            </div>
            <div className={styles.statistics}>
                <div className={styles.title}>活动概况</div>
                <div className={styles.basic_list}>
                    <ul>
                        <li>
                            <div className={styles.basic_list_t}>访问人数</div>
                            <div className={styles.basic_list_n}>{detail.visitPersonCount}人</div>
                        </li>
                        <li>
                            <div className={styles.basic_list_t}>访问次数</div>
                            <div className={styles.basic_list_n}>{detail.visitCount}次</div>
                        </li>
                        <li>
                            <div className={styles.basic_list_t}>分享人数</div>
                            <div className={styles.basic_list_n}>{detail.sharePersonCount}人</div>
                        </li>
                        <li>
                            <div className={styles.basic_list_t}>分享次数</div>
                            <div className={styles.basic_list_n}>{detail.shareCount}次</div>
                        </li>
                    </ul>
                </div>
            </div>
            <div className={styles.mart34}>
                <div className={styles.qushi}>
                    <div className={`${styles.title} ${styles.fl}`}>活动趋势</div>
                    <div className={styles.fr}>
                        <div className={styles.times}>
                            <Select placeholder='请选择时间' defaultValue={'打开次数'} onChange={(e, opt) => {
                                inputChange(e, 'lookPerson', opt)
                            }}>
                                {showType1.map(function (item, index) {
                                    return (
                                        <Select.Option key={item.value} value={item.value}>{item.label}</Select.Option>
                                    )
                                })}
                            </Select>
                        </div>
                    </div>
                </div>
                <Chart Option={lineoption}></Chart>
            </div>
            <div className={styles.mart34}>
                <div className={styles.qushi}>
                    <div className={`${styles.title} ${styles.fl}`}>
                        <span>进入来源</span>
                        <span className={styles.marl14}>
                            <Tooltip
                                title={
                                    <div>
                                        <div>识别小程序码/二维码：用户通过识别小程序码/二维码进入活动；</div>
                                        <div>会话：用户通过微信聊天窗口点击进入活动；</div>
                                        <div>应用内主动点击：用户通过美的置业云小程序/APP主动点击进入活动；</div>
                                        <div>其他：通过其他方式进入活动</div>
                                    </div>

                                }
                            >
                                <Icon className={styles.iconTooltip} type="question-circle" />
                            </Tooltip>
                        </span>
                    </div>
                    <div className={styles.fr}>
                        <div className={styles.times}>
                            <Select placeholder='请选择时间' defaultValue={'打开次数'} onChange={(e, opt) => {
                                inputChange(e, 'comeIn', opt)
                            }}>
                                {showType1.map(function (item, index) {
                                    return (
                                        <Select.Option key={item.value} value={item.value}>{item.label}</Select.Option>
                                    )
                                })}
                            </Select>
                        </div>
                    </div>
                </div>
                <Chart Option={baroption}></Chart>
            </div>
            <div className={styles.mart34}>
                <div className={styles.lanmushu}>
                    <span>栏目数据</span>
                    <div className={styles.exporto}>
                        <Button type="primary" onClick={() => activityAreaexport()}>导出</Button>
                    </div>
                </div>
                <div>
                    <Table
                        columns={columns}
                        dataSource={listData}
                        pagination={false}
                    />
                </div>
            </div>
        </div>
    )
}
export default connect(mapStateToProps)(Form.create()(liveStatisticsView))
